<template>
  <div>
    <div class="list-header">
      <el-form :model="filterParams" ref="filter-form" :inline="true" label-position="top">
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="filterParams.phone" placeholder="输入手机号"></el-input>
        </el-form-item>
        <el-form-item label="注册时间" prop="rangeDate">
          <el-date-picker
            v-model="filterParams.rangeDate"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>
        <el-form-item >
          <el-button @click="handleQuery" style="margin-top: 42px" :disabled="loading">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-card shadow="never" :body-style="{ padding: '0px 0px' }">
        <el-table :data="users" style="width: 100%" v-loading="loading">
          <el-table-column prop="id" label="用户ID" width="100" align="center">
          </el-table-column>
          <el-table-column prop="name" label="头像" width="80" align="center">
            <template slot-scope="scope">
              <img
                width="30px"
                style="border-radius: 50%"
                :src="
                  scope.row.portrait ||
                  '//www.lgstatic.com/thumbnail_100x100/i/image2/M01/5E/65/CgotOVszSAOANi0LAAAse2IVWAE693.jpg'
                "
              />
            </template>
          </el-table-column>
          <el-table-column prop="name" label="用户名" align="center">
          </el-table-column>
          <el-table-column prop="phone" label="手机号" align="center">
          </el-table-column>
          <el-table-column prop="createTime" label="注册时间" align="center">
          </el-table-column>
          <el-table-column prop="name" label="状态" width="80">
            <template slot-scope="scope">
              <div
                class="status"
                :style="{
                  background:
                    scope.row.status === 'ENABLE' ? '#13ce66' : '#ff4949',
                }"
              ></div>
            </template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="操作"
            align="center"
            width="180px"
          >
            <template slot-scope="scope">
              <el-button type="text" @click="handleSelectRole(scope.row)"
                >分配角色</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-dialog title="分配角色" :visible.sync="dialogVisible" width="40%">
          <el-select
            v-model="roleIdList"
            multiple
            placeholder="请选择"
            style="width: 100%"
          >
            <el-option
              v-for="item in roles"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="handleAllocRole">确 定</el-button>
          </span>
        </el-dialog>
      </el-card>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { getUserPages } from '@/services/user'
import { getAllRoles, allocateUserRoles, getUserRoles } from '@/services/role'
import { dateFormat } from '@/utils/date'

export default Vue.extend({
  name: 'UserList',
  data () {
    return {
      users: [],
      filterParams: {
        currentPage: 1,
        pageSize: 100,
        phone: '',
        startCreateTime: '',
        endCreateTime: '',
        rangeDate: []
      },
      loading: true,
      dialogVisible: false,
      roles: [],
      roleIdList: [],
      currentUser: {} as FromServer.UserItem // 分配角色的当前用户
    }
  },

  created () {
    this.loadUsers()
  },

  methods: {
    async loadUsers () {
      this.loading = true
      const { rangeDate } = this.filterParams
      if (rangeDate && rangeDate.length) {
        this.filterParams.startCreateTime = rangeDate[0]
        this.filterParams.endCreateTime = rangeDate[1]
      } else {
        this.filterParams.startCreateTime = ''
        this.filterParams.endCreateTime = ''
      }
      const { data } = await getUserPages(this.filterParams)
      this.users = data.data.records.map((item: FromServer.UserItem) => {
        return {
          ...item,
          createTime: dateFormat(item.createTime, 'YYYY-MM-DD HH:MM:SS')
        }
      })
      this.loading = false
    },

    handleQuery () {
      this.filterParams.currentPage = 1
      this.loadUsers()
    },

    async handleSelectRole (role: FromServer.UserItem) {
      this.currentUser = role
      // 加载角色列表
      const { data } = await getAllRoles()
      this.roles = data.data

      const {
        data: { data: userRoles }
      } = await getUserRoles(this.currentUser.id)
      this.roleIdList = userRoles.map((item: FromServer.RoleItem) => item.id)

      // 展示对话框
      this.dialogVisible = true
    },

    async handleAllocRole () {
      await allocateUserRoles({
        userId: this.currentUser.id,
        roleIdList: this.roleIdList
      })
      this.$message.success('操作成功')
      this.dialogVisible = false
    }
  }
})
</script>

<style lang="scss" scoped>
.status {
  display: inline-block;
  cursor: pointer;
  width: 0.875rem;
  height: 0.875rem;
  vertical-align: middle;
  border-radius: 50%;
}
</style>
